<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>长春轨道交通</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/all_css.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/base.css" />
		<link rel="stylesheet" type="text/css" href="lib/weui.css" />
		<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css" />
		<link rel="stylesheet" type="text/css" href="css/photoswipe.css" />
		<link rel="stylesheet" type="text/css" href="css/default-skin.css" />
		<style type="text/css">
			* {
				background-color: transparent;
			}
			
			img {
				width: 100%;
			}
			/*body {
				overflow-y: hidden;
			}*/
			
			.index_head {
				background-color: #0070B4;
				padding: 25px 20px;
				position: static;
				/*层级低于所有页面遮罩层*/
			}
			
			#subway_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			
			.app_head_left {
				float: left;
				width: 30%;
				padding-top: 6px;
				padding-left: 6px;
			}
			
			.app_head_left a {
				color: #FFFFFF;
				font-size: 1.5em;
				font-weight: bold;
			}
			
			.app_head_mid {
				float: left;
				width: 40%;
				padding-top: 5px;
			}
			
			#app_head_title {
				text-align: center;
				color: #FFFFFF;
				font-size: 1.6em;
				font-family: "宋体";
				font-weight: bold;
			}
			
			.app_head_right {
				float: right;
				width: 30%;
				text-align: right;
				padding-right: 10px;
				height: 30px;
			}
			
			.my-gallery {
				width: 45px;
				float: right;
				position: relative;
				left: 16px;
			}
			
			.weui-row {
				width: 100%;
				position: relative;
				top: -3px;
				border: 1px solid #DEDEDE;
			}
			
			.weui-row .weui-col-33 {
				display: block;
				height: 50px;
				line-height: 48px;
				background-color: #CCCCCC;
			}
			
			.weui-row .weui-col-33:nth-child(1) {
				background-color: #FFFFFF;
			}
			
			.weui-row .weui-col-33:nth-child(1) img {
				width: 37px;
			}
			
			.weui-row .weui-col-33 img {
				width: 31px;
				vertical-align: middle;
				margin-right: 3px;
			}
			
			.weui-row .weui-col-33 b {
				color: #FFFFFF;
				font-size: 1.15em;
				padding: 5px 0px;
			}
			/*--白色小竖线划分区域--*/
			
			.weui-row .weui-col-33 label {
				float: right;
				font-size: 1.3em;
				color: #FFFFFF;
				position: relative;
				left: 2px;
			}
			
			.subwayZz_mid {
				padding: 10px;
				padding-top: 30px;
			}
			
			.subwayZz_mid div {
				width: 84%;
				height: 50px;
				border: 1px solid #DEDEDE;
				border-radius: 8px;
				margin-top: 30px !important;
				margin: auto;
				line-height: 48px;
				position: relative;
				left: 8px;
			}
			
			.subwayZz_mid div span {
				display: block;
				float: left;
				color: #666666;
				padding-left: 1em;
				border: none;
				width: 100%;
				outline: none;
				height: 90%;
				font-size: 1.2em;
				height: 35px;
				margin-top: 7px;
				line-height: 34px;
			}
			
			#startLineNub,
			#endLineNub {
				border-right: 1px solid #DEDEDE;
				width: 49%;
			}
			
			#startSub,
			#endSub {
				/*border-left: 1px solid #DEDEDE;*/
				width: 50%;
			}
			
			#connotsearch_zz {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 70px;
				background-color: #CCCCCC;
			}
			
			#search_zz {
				display: block;
				width: 40%;
				height: 40px;
				line-height: 40px;
				color: #FFFFFF;
				font-size: 1.3em;
				text-align: center;
				border-radius: 8px;
				margin-top: 70px;
				background-color: #0070B4;
			}
			/*--互换起终点按钮--*/
			/*#exchangeSubBtn img {
				width: 27px;
				position: relative;
				top: 115px;
				left: 20px;
			}*/
			/*----底部----*/
			
			footer {
				background-color: #DCDCDC;
				max-width: 640px;
				min-width: 320px;
				margin: 0px auto;
			}
			
			footer li {
				width: 50%;
			}
			
			footer li a {
				border-right: 1px solid #B1B1B1;
				height: 65%;
			}
			
			footer li:first-child a img {
				width: 50px;
			}
			
			footer li:last-child a img {
				width: 36px;
				margin-top: 2px;
			}
			
			footer label {
				color: #0070B4;
				position: relative;
				top: -13px;
				font-size: 1.1em;
			}
			/*--关闭按钮--*/
			
			.close-select {
				color: #0070B4 !important;
			}
			/*--下拉框每行高度属性--*/
			
			.weui_check_label {
				height: 70px;
			}
			/*--车辆查询内容部分--*/
			
			#subTrain_main {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
			}
			/*---遮罩层---*/
			
			.opacity {
				opacity: 0.7;
				filter: alpha(opacity=30);
				background-color: #000;
				z-index: 99;
			}
			
			.mask {
				position: fixed;
				height: 100%;
				width: 100%;
			}
			
			html,
			body {
				height: 100%;
			}
			/*----车站选择弹出层样式----*/
			
			#full_ZzResult {
				max-width: 640px;
				min-width: 320px;
				width: 100%;
				margin: 0px auto;
				overflow: hidden;
			}
			
			#subwayZz_tanchu {
				height: 100%;
			}
			
			#closeBtn {
				color: #FFFFFF;
				font-size: 1.2em;
				margin-top: -7px;
				margin-right: 8px;
			}
			/*全屏弹出框*/
			
			#subwayZz_tanchu .toolbar-inner {
				height: 70px !important;
				background-color: #333333;
				padding: 25px 20px;
			}
			/*半屏弹出框*/
			
			.toolbar-inner {
				height: 55px !important;
				background-color: #333333;
				padding: 7px 20px;
			}
			
			.toolbar-inner h1 {
				color: #FFFFFF !important;
			}
			
			.toolbar-inner a {
				color: #00B9E8 !important;
			}
			
			.toolbar {
				background-color: #FFFFFF;
				height: 100%;
				/*border: 10px solid;*/
				background-image: url(img/subway/subwayBg.png);
				background-size: 130%;
				background-position: 0% 100%;
				background-repeat: no-repeat;
				z-index: 999999;
			}
			/*--查询结果区域样式--*/
			
			#result_mid_1 {
				text-align: center;
			}
			
			#result_mid_1 img {
				width: 17%;
				height: 30px;
				vertical-align: middle;
				margin: 15% 10%;
			}
			
			#result_mid_1 span {
				font-size: 1.35em;
				color: #666666;
			}
			
			.result_mid ul {
				width: 50%;
				margin-left: 29%;
				height: 80%;
			}
			
			.result_mid li {
				font-size: 1.3em;
				color: #666666;
				height: 90px;
				line-height: 90px;
			}
			
			.result_mid li span {
				color: #00B9E8;
				font-weight: bold;
				font-size: 1.35em;
			}
		</style>
	</head>

	<body ontouchstart>
		<div class="mask opacity" id="opacityDiv" style="display: none;"></div>
		<div id="subway_main">
			<div class="index_head" id="firTitle">
				<div class="app_head_left">
					<a href="index01.html" class="iconfont">&#xe6d4;</a>
				</div>
				<div class="app_head_mid">
					<p id="app_head_title">轨道交通</p>
				</div>
				<div class="app_head_right">
					<div class="my-gallery" data-pswp-uid="1">
						<figure>
							<a href="img/subway/bigSubwayMap.jpg" data-size="770x812">
								<img src="img/subway/subway_03.png" />
							</a>
						</figure>
					</div>
				</div>
			</div>
			<div class="weui-row weui-no-gutter tc">
				<a class="weui-col-33">
					<img src="img/subway/blueZhandian.png" /><b style="color: #0070B4;">站站查询</b>
				</a>
				<a class="weui-col-33" href="subway2.html">
					<img src="img/subway/whiteZhanzhan.png" /><b>站点查询</b><label>|</label>
				</a>
				<a class="weui-col-33" href="subway3.html">
					<img src="img/subway/whiteCheliang.png" /><b>车辆查询</b>
				</a>
			</div>
			<div class="subwayZz_mid">
				<!--<span id="exchangeSubBtn"><img src="img/subway/exchange_icon.png"/></span>-->
				<div>
					<span id="startLineNub">请选择线路</span>
					<span id="startSub">请选择起点</span>
				</div>
				<div>
					<span id="endLineNub">请选择线路</span>
					<span id="endSub">请选择终点</span>
				</div>
				<a href="javascript:;" id="search_zz" style="display: none;" class="public-th open-popup" data-target="#full_ZzResult">查询</a>
				<a href="javascript:;" id="connotsearch_zz">查询</a>
			</div>
			<!--<footer>
				<li>
					<a href="javascript:;">
						<img src="img/subway/qingguiICONblue.png" />
						<label>轻轨<label>
				    </a>
			    </li>
			    <li>
				    <a href="subway_ditie.html" style="border: none;">
					    <img src="img/subway/ditieICONblue.png" />
					    <label>地铁</label>
					</a>
				</li>
			</footer>-->
			<div id="full_ZzResult" class="weui-popup-container popup-bottom weui-popup-modal-visible">
				<div class="weui-popup-overlay yinying" id="yinying"></div>
				<div id="subwayZz_tanchu" class="weui-popup-modal">
					<div class="toolbar">
						<div class="toolbar-inner">
							<div class="app_head_left">
								<a href="javascript:;" class="picker-button close-popup" id="closeBtn">返回</a>
							</div>
							<div class="app_head_mid">
								<p id="app_head_title">查询结果</p>
							</div>
						</div>
						<!--<div class="bg-blur"></div>-->
						<div class="result_mid">
							<h2 id="result_mid_1">
								<span id="subResult_start"></span>
								<img src="img/subway/changjiantouSub2.png"/>
								<span id="subResult_end"></span>
							</h2>
							<ul>
								<li>全程：&nbsp;<span id="resultLong"></span>&nbsp;公里</li>
								<li>票价：&nbsp;<span id="resultPrice"></span>&nbsp;元</li>
								<li>时长：&nbsp;<span id="resultTime"></span>&nbsp;分钟</li>
							</ul>

						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Root element of PhotoSwipe. Must have class pswp. -->
		<div class="pswp" tabindex="1" role="dialog" aria-hidden="true">

			<!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
			<div class="pswp__bg"></div>

			<!-- Slides wrapper with overflow:hidden. -->
			<div class="pswp__scroll-wrap">

				<!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
				<div class="pswp__container">
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
				</div>

				<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
				<div class="pswp__ui pswp__ui--hidden">

					<div class="pswp__top-bar">

						<!--  Controls are self-explanatory. Order can be changed. -->

						<div class="pswp__counter"></div>

						<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

						<button class="pswp__button pswp__button--share" title="Share"></button>

						<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

						<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

						<!-- element will get class pswp__preloader--active when preloader is running -->
						<div class="pswp__preloader">
							<div class="pswp__preloader__icn">
								<div class="pswp__preloader__cut">
									<div class="pswp__preloader__donut"></div>
								</div>
							</div>
						</div>
					</div>

					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
						<div class="pswp__share-tooltip"></div>
					</div>

					<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>

					<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

					<div class="pswp__caption">
						<div class="pswp__caption__center"></div>
					</div>

				</div>

			</div>

		</div>
		<!--data-pswp-uid在每个相册中必须是唯一的，data-size指定放大时图片显示的宽和高-->

		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/weui/jquery-weui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/back_end.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/photoswipe-ui-default.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bigPicResearch.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//			$(function() {
			//				$("#search_zz").click();
			//			})
			var l1;
			var l2;
			var s1;
			var s2;
			//			$("#exchangeSubBtn").click(function() {
			//				if(l1 != "请选择线路" && l2 != "请选择线路" && s1 != "请选择起点" && s2 != "请选择终点"){
			//					
			//				}
			//				$("#startLineNub").html(l2);
			//				$("#endLineNub").html(l1);
			//				$("#startSub").html(s2);
			//				$("#endSub").html(s1);
			//			});
			$(function(){
				console.log(true);
			});
				
			
			function changeBtnCol() {
				l1 = $("#startLineNub").html();
				l2 = $("#endLineNub").html();
				s1 = $("#startSub").html();
				s2 = $("#endSub").html();
				if(l1 != "请选择线路" && l2 != "请选择线路" && s1 != "请选择起点" && s2 != "请选择终点") {
					$("#connotsearch_zz").hide();
					$("#search_zz").show();
				} else {
					//					alert(l1 + "--" + l2 + "--" + s1 + "--" + s2);
					$("#search_zz").hide();
					$("#connotsearch_zz").show();
				}
			}

			function getArrAjax(d, t) {
				var stopItems; //设置一个全局变量，将选择的线路所有站点以数组形式赋值
				$.ajax({
					type: "post",
					url: Url,
					data: {
						"type": "rail_station_info",
						"LINENAME": d.titles,
						"RAILTYPE": d.values //1为轻轨（默认）2为地铁
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(data);
						var allStr = "";
						for(var i = 0; i < eval(data.DATA).length; i++) {
							var startStopStr = '"title"' + ':' + '"' + eval(data.DATA)[i].STOP_NAME + '"';
							//								allStr+= ","+eval(data.DATA)[i].STOP_NAME;
							allStr += ",{" + startStopStr + "}";
						}
						allStr = allStr.substr(1);
						stopItems = JSON.parse('[' + allStr + ']');
						//console.log(stopItems);

						//点击起点站名框
						$(t).select("update", {
							title: "请选择起点",
							items: stopItems,
							onChange: function(d) {
								//console.log(d.titles);
								$(t).html(d.titles);
								changeBtnCol();
							},
							onOpen: function() {
								//弹窗打开时 显示遮罩层
								$("#opacityDiv").show();
							},
							onClose: function() {
								//弹窗关闭时 隐藏遮罩层
								$("#opacityDiv").hide();
							}
						});
						$(t).click();
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			}
			//选择起点的线路与站名
			$("#startLineNub").select({
				title: "请选择线路",
				items: [{
					title: "地铁1号线",
					value: 2
				}, {
					title: "轻轨3号线",
					value: 1
				}, {
					title: "轻轨4号线",
					value: 1
				}],
				onChange: function(d) {
					//					console.log(d.values);
					$("#startLineNub").html(d.titles);
					//获取本条轻轨站点信息

					getArrAjax(d, $("#startSub"));
					changeBtnCol();
					$("#startSub").html("请输入起点"); //选择线路过后，清空之前选择的站点名称
					//					changeSearchBtn();
				},
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗关闭时 隐藏遮罩层
					$("#opacityDiv").hide();
				}
			});
			//选择终点的线路与站名
			$("#endLineNub").select({
				title: "请选择线路",
				items: [{
					title: "地铁1号线",
					value: 2
				}, {
					title: "轻轨3号线",
					value: 1
				}, {
					title: "轻轨4号线",
					value: 1
				}],
				onChange: function(d) {
					$("#endLineNub").html(d.titles);
					getArrAjax(d, $("#endSub"));
					changeBtnCol();
					$("#endSub").html("请输入终点"); //选择线路过后，清空之前选择的站点名称
				},
				onOpen: function() {
					//弹窗打开时 显示遮罩层
					$("#opacityDiv").show();
				},
				onClose: function() {
					//弹窗关闭时 隐藏遮罩层
					$("#opacityDiv").hide();
				}
			});
			//点击查询按钮
			$("#search_zz").click(function() {
				console.log(s1);
				console.log(s2);
				$.ajax({
					//获取轻轨站站查询信息
					type: "post",
					url: Url,
					data: {
						"type": "rail_station_query_info",
						"STARTSTATION": s1,
						"ENDSTATION": s2
					},
					async: false,
					cache: false,
					dataType: "jsonp", //数据类型为jsonp
					jsonp: "callbackparam", //服务端用于接收callback调用的function名的参数  
					jsonpCallback: "jsonpCallback1",
					success: function(data) {
						console.log(eval(data.DATA)[0].EXPECT_TIME);
						var far = eval(data.DATA)[0].STOP_SPACING;
						var price = eval(data.DATA)[0].STOP_PRICE;
						var time = eval(data.DATA)[0].EXPECT_TIME;
						$("#subResult_start").html(s1);
						$("#subResult_end").html(s2);
						$("#resultLong").html(far);
						$("#resultPrice").html(price);
						$("#resultTime").html(time);
					},
					error: function(data) {
						$.alert("连接超时，请检查网络设置", "提示");
					}
				});
			});
		</script>
	</body>

</html>